<template>
        <div class="area" v-if="cityinfo" ref="area_scroll">
            <div class="scroll_wrap">
                <!-- 热门城市 -->
                <div class="hot_wrap citylist" >
                    <div class="title">热门城市</div>
                    <ul class="hot_city">
                        <li v-for='(item,index) in cityinfo.hotCity' :key='index' @click="$emit('selectCity',item)">
                            {{item.city_name}}
                        </li>
                    </ul>
                </div>
                <!-- 所有城市 -->
                <div class="city_wrap">
                    <!-- 循环按字母排序的key -->
                    <div class="city_content citylist" v-for="(item,index) in keys" :key="index">
                        <div class="titleKey">{{item}}</div>
                    <!-- 根据字母key展示城市名字 -->
                    <ul>
                        <!-- 这里的item是字母排序的item -->
                        <li v-for="(city,index) in cityinfo[item]" :key="index" @click="$emit('selectCity',city)">
                            {{city.city_name}}
                        </li>
                    </ul>
                    </div>
                </div>
            </div>
            <div class="area_keys">
                <ul>
                    <li @click="selectKey(0)">#</li>
                    <li @click="selectKey(index+1)" v-for="(item,index) in keys" :key="index">
                        {{item}}
                    </li>
                </ul>
            </div>
        </div>
  </template>

<script>
    import BScroll from "better-scroll";
    export default {
        name: 'alphabet',
        data() {
            return {
                scroll: null,
            }
        },
        props: {
            cityinfo: Object,
            keys: Array,
        },

        methods: {
            initScroll() {
                this.scroll = new BScroll(this.$refs.area_scroll, {
                    click: true, //因为右侧有内容 要实现点击
                })
            },
            selectKey(index) {
                // console.log(index);
                //console.log(this.$refs.area_scroll.getElementsByClassName("citylist"));
                // 拿到整个className包含的整个元素
                const cityList = this.$refs.area_scroll.getElementsByClassName("citylist");
                //根据下标，滚动到相对应的元素上
                let el = cityList[index];
                this.scroll.scrollToElement(el, 250)

            }
        }
    }
</script>
<style scoped>
    .area {
        margin-top: 10px;
        box-sizing: border-box;
        padding: 0 16px;
        background: #fff;
        height: calc(100% - 65px);
        overflow: hidden;
    }
    
    .scroll_wrap {
        background: #fff;
        overflow: auto;
    }
    
    .title {
        color: #aaa;
        padding: 15px 0;
    }
    
    .hot_city {
        padding: 0 16px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .hot_city li {
        width: 30%;
        background: #f1f1f1;
        margin: 0 10px 10px 0;
        text-align: center;
        padding: 10px;
        box-sizing: border-box;
    }
    
    .city_content li {
        padding: 10px;
        border-bottom: 1px solid #eee;
    }
    
    .area_keys {
        position: fixed;
        right: 0;
        top: 25%;
        color: #aaa;
        font-size: 12px;
        line-height: 1.4;
        text-align: center;
        padding: 0 5px;
    }
</style>